<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>防抖函数</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}

			body,
			html {
				height: 100%;
				overflow: hidden;
			}

			#scrollWrap {
				height: 100%;
				overflow-y: auto;
			}

			.output {
				background: #00BFFF;
				opacity: 0.5;
			}
		</style>
	</head>
	<body>
		<div id="scrollWrap">
			<div style="height: 3000px;"></div>
		</div>


		<script type="text/javascript">
			// throttle 简易版 非立即执行
			// 非立即执行就是过了n秒后我们再执行，那么我们自然而然想到定时器
			function throttle(fn, wait) {
				let timeout = null;
				let args = null;
				let context = null;
				return function() {
					args = arguments;
					context = this;
					if(timeout){
						return false;
					}
					timeout=setTimeout(function(){
						fn.apply(context,args);
						timeout=null
					},wait)
				}
			}
		</script>
		<script type="text/javascript">
			var scrollWrap = document.querySelector("#scrollWrap");

			function output(e) {
				console.log(e.target.scrollTop);
			}

			scrollWrap.addEventListener('scroll', throttle(output, 1000))
		</script>
	</body>
</html>
